﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	PieChart
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>PieChart</h2>
    <input type="radio" title="List" checked="checked" name="List" value="List" />List
    <input type="radio" title="Graph" name="List" value="Graph" />Graph
    <div id="list" style="width: 800px; height: 400px; margin: 0 auto">
    		<table border="1" id="datatable">
			<thead>
				<tr>
                    <th class="tabletext">组织单元</th>
					<th class="tabletext">时间</th>
					<th class="tabletext kpi">作业组总数</th>
					<th class="tabletext kpi">作业组按时完成数</th>
                    <th class="tabletext kpi">作业组延时完成数</th>
                    <th class="tabletext kpi">作业组按时完成率</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th rowspan="3" class="tabletext series">车间一</th>
					<th class="tabletext xAxis">2011年1月</th>
					<td class="tabletext 车间一_2011年1月_作业组总数">12</td>
                    <td class="tabletext 车间一_2011年1月_作业组按时完成数">10</td>
                    <td class="tabletext 车间一_2011年1月_作业组延时完成数">2</td>
                    <td class="tabletext 车间一_2011年1月_作业组按时完成率">83.33%</td>
				</tr>
                <tr>					
					<th class="tabletext xAxis">2011年2月</th>
					<td class="tabletext 车间一_2011年2月_作业组总数">12</td>
                    <td class="tabletext 车间一_2011年2月_作业组按时完成数">9</td>
                    <td class="tabletext 车间一_2011年2月_作业组延时完成数">3</td>
                    <td class="tabletext 车间一_2011年2月_作业组按时完成率">75%</td>
				</tr>
                <tr>					
					<th class="tabletext xAxis">2011年3月</th>
					<td class="tabletext 车间一_2011年3月_作业组总数">12</td>
                    <td class="tabletext 车间一_2011年3月_作业组按时完成数">11</td>
                    <td class="tabletext 车间一_2011年3月_作业组延时完成数">1</td>
                    <td class="tabletext 车间一_2011年3月_作业组按时完成率">91.67%</td>
				</tr>
                <tr>
					<th rowspan="3" class="tabletext series">车间二</th>
					<th class="tabletext">2011年1月</th>
					<td class="tabletext 车间二_2011年1月_作业组总数">12</td>
                    <td class="tabletext 车间二_2011年1月_作业组按时完成数">11</td>
                    <td class="tabletext 车间二_2011年1月_作业组延时完成数">1</td>
                    <td class="tabletext 车间二_2011年1月_作业组按时完成率">91.67%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年2月</th>
					<td class="tabletext 车间二_2011年2月_作业组总数">12</td>
                    <td class="tabletext 车间二_2011年2月_作业组按时完成数">12</td>
                    <td class="tabletext 车间二_2011年2月_作业组延时完成数">0</td>
                    <td class="tabletext 车间二_2011年2月_作业组按时完成率">100%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年3月</th>
					<td class="tabletext 车间二_2011年3月_作业组总数">12</td>
                    <td class="tabletext 车间二_2011年3月_作业组按时完成数">10</td>
                    <td class="tabletext 车间二_2011年3月_作业组延时完成数">1</td>
                    <td class="tabletext 车间二_2011年3月_作业组按时完成率">83.33%</td>
				</tr>
                <tr>
					<th rowspan="3" class="tabletext series">车间三</th>
					<th class="tabletext">2011年1月</th>
					<td class="tabletext 车间三_2011年1月_作业组总数">12</td>
                    <td class="tabletext 车间三_2011年1月_作业组按时完成数">5</td>
                    <td class="tabletext 车间三_2011年1月_作业组延时完成数">7</td>
                    <td class="tabletext 车间三_2011年1月_作业组按时完成率">41.67%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年2月</th>
					<td class="tabletext 车间三_2011年2月_作业组总数">12</td>
                    <td class="tabletext 车间三_2011年2月_作业组按时完成数">8</td>
                    <td class="tabletext 车间三_2011年2月_作业组延时完成数">4</td>
                    <td class="tabletext 车间三_2011年2月_作业组按时完成率">66.67%</td>
				</tr>
                <tr>					
					<th class="tabletext">2011年3月</th>
					<td class="tabletext 车间三_2011年3月_作业组总数">12</td>
                    <td class="tabletext 车间三_2011年3月_作业组按时完成数">6</td>
                    <td class="tabletext 车间三_2011年3月_作业组延时完成数">6</td>
                    <td class="tabletext 车间三_2011年3月_作业组按时完成率">50%</td>
				</tr>
            </tbody>
		</table>
    </div>
    <div id="graph">
        <div>
            可选KPI：<select id="allkpi" name="allkpi" style='width: 200px;'></select></div>
    </div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .tabletext
        {
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../../Scripts/highcharts.src.js"></script>
    <script type="text/javascript" src="../../Highcharts-2.1.4/js/themes/grid.js"></script>
    <script type="text/javascript">

        var categoryCount = 0;       

        // 增加
        function AddAllKPI() {
            var options = "";
            $('.kpi').each(function () {
                options = options + "<option value='" + this.innerHTML + "'>" + this.innerHTML + "</option>";
            });
            $('#allkpi').append(options);
        }

        // 初始化Pie Options
        function InitGraphOptions(xAxis, kpi, renderToDiv)
        {
            options = {
                chart: {
                    renderTo: renderToDiv,
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: xAxis + " " + kpi
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function () {
                                return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: kpi,
                    data: []
                }]
            };
            return options;
        }

        // 显示一个Pie
        function DisplayPie(table, xAxis, kpi, renderToDiv) {
            var options = InitGraphOptions(xAxis, kpi, renderToDiv);
            // 填充数据
            var allCount = 0;
            $('.series', table).each(function (i) {
                var select = "." + this.innerHTML + "_" + xAxis + "_" + kpi;
                var value = $(select)[0];
                if (value != null) {
                    var curValue = parseFloat(value.innerHTML);
                    allCount = allCount + curValue;
                }
            });
            $('.series', table).each(function (i) {
                var select = "." + this.innerHTML + "_" + xAxis + "_" + kpi;
                var value = $(select)[0];
                if (value != null) {
                    var curValue = parseFloat(value.innerHTML);
                    if (allCount != 0) {
                        curValue = (curValue / allCount) * 100;
                        curValue = curValue.toFixed(2);
                        curValue = parseFloat(curValue);
                    }
                    options.series[0].data.push({ name: this.innerHTML, y: curValue });
                }
            });
            var chart = new Highcharts.Chart(options);
        }

        // 显示所有Pie
        function DisplayAllPie(table, kpi) {
            var newCategoryCount = 0;
            $('.xAxis', table).each(function (i) {
                newCategoryCount = newCategoryCount + 1;
                var renderToDiv = 'piegraph' + newCategoryCount;
                if (categoryCount < newCategoryCount) {                   
                    $('#graph').append('<div id="' + renderToDiv + '" style="width: 600px; height: 400px; margin: 0 auto"/>')
                }
                DisplayPie(table, this.innerHTML, kpi,renderToDiv);
            });
            for (var i = newCategoryCount; i < categoryCount; i++) {
                var oldDiv = 'piegraph' + i;
                $('#graph').remove('#' + oldDiv);
            }
            categoryCount = newCategoryCount;
        }

        $(document).ready(function () {
            // 选择的KPI发生变化
            $('#allkpi').change(function () {
                var table = $("#datatable");
                DisplayAllPie(table[0], this.value);
            });

            // 显示表格和图形发生变化
            $(":radio").click(function () {
                if (this.value == "List") {
                    $("#graph").hide();
                    $("#list").show();
                }
                else if (this.value == "Graph") {
                    $("#list").hide();
                    $("#graph").show();
                }
            });

            // 初始显示表格
            $("#graph").hide();
            $("#list").show();

            // 增加KPI
            AddAllKPI();

            // 显示Pie
            var table = $("#datatable");
            var kpi = $("#allkpi").val();
            DisplayAllPie(table[0], kpi);
        });				
    </script>
</asp:Content>